<template>
  <div>
    <div class="main">
      <!-- 食谱块 -->
      <div class="img-box">
        <img :src="pic" class="auto-img" @click="toCaiPuPage()" />
      </div>
      <span class="title" @click="toCaiPuPage()">{{ title }}</span>
      <span class="author">{{ authorName }}</span>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    id: Number,
  },
  data() {
    return {
      pic:
        "https://i3.meishichina.com/attachment/recipe/2018/02/02/20180202151754147560613.jpg?x-oss-process=style/c320",
      title: "一篇菜谱",
      url:
        "https://i3.meishichina.com/attachment/recipe/2018/02/02/20180202151754147560613.jpg?x-oss-process=style/c320",
      authorName: "王楷",
      authorUrl: "",
    };
  },
  methods: {
    toAuthorPage() {
      //todo
      this.$router.push("/index");
    },
    toCaiPuPage() {
      //todo
      this.$router.push("/shipu/" + this.id);
    },
  },
};
</script>

<style lang="less" scoped>
.main {
  margin: 0;
  padding: 0;
  width: 200px;
  border: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  .img-box {
    width: 200px;
    height: 200px;
    perspective: 200px;
    overflow: hidden;
    img {
      height: 100%;
      width: 100%;
      transition: 1s all;
      &:hover {
        cursor: pointer;
        transform: translateZ(20px);
      }
    }
  }
  .title {
    line-height: 30px;
    font-size: 20px;
    color: #333;
    transition: all 0.2s;
    &:hover {
      color: #fabc2a;
      cursor: pointer;
    }
  }
  .author {
    line-height: 20px;
    font-size: 15px;
    color: #999;
    transition: all 0.2s;
    &:hover {
      color: #fabc2a;
      cursor: pointer;
    }
  }
}
</style>

